<template>
    <div class="tool-container" @click="choise">
        <Poptip trigger="hover" placement="left">
            <div class="tool-icon mb-1" :class="{'disable-icon':!enable}">
                <img :src="img">
            </div>
            <div class="tool-label" :class="{'disable-label':!enable}">{{label}}</div>
            <div slot=content class="text-muted small tool-dialog">
                <p class='text-left' v-if="desc" >{{desc}}</p>
                <p v-else>暂无描述</p>
            </div>
        </Poptip>
    </div>
</template>

<style scoped>
    .tool-container {
        width: 80px;
        padding: 5px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    .tool-icon {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        display: block;
        margin: 0 auto;
        padding: 10px;
        border: 1px solid #bbbec4;
    }

    .tool-icon:hover {
        background-color: #eee;
    }

    .tool-icon img {
        width: 100%;
    }

    .tool-label {
        font-size: 12px;
        text-align: center;
    }

    .disable-icon{
        background-color: #f3f3f3;
    }

    .disable-label{
        color: #e4e4e4;
    }

    .tool-icon.disable-icon{
        cursor: no-drop;

    }

    .tool-icon.disable-icon:hover {
        background-color:none;
    }

    .tool-dialog{
        font-size: 8px;
        max-width: 300px;
    }

    .tool-dialog p{
        word-wrap:break-word;
        word-break: normal;
        width:300px;
    }
</style>

<script>
export default {
    name: "ToolItem",
    props: {
        label: {
            type: String,
            required: true,
            default: ""
        },
        img: {
            type: String,
            required: true,
            default: ""
        },
        code: {
            type: String,
            required: true,
            default: ""
        },
        enable: {
            type: Boolean,
            required: true,
            default: false
        },
        oid: {
            type: Number,
            required: true,
            default: 0
        },
        desc: {
            required: true,
            default: '暂无描述'
        }
    },
    data(){
        return {
            showDialog: false
        }
    },
    methods: {
        choise() {
            let self = this;
            if(self.enable){
                self.EventOperator.$emit("rpcToolClick", {
                    oid: self.oid,
                    name: self.label,
                    code: self.code
                });
            }
        }
    }
};
</script>

